<style>
    .ivu-steps .ivu-steps-title {
        background: #f8f8f9 !important;
        font-size: 18px !important;
    }

    .ivu-steps .ivu-steps-head {
        background: #f8f8f9 !important;
    }

    .ivu-steps .ivu-steps-content {
        font-size: 16px !important;
    }

    .ivu-steps-vertical .ivu-steps-item {
        height: 90px;
    }

    .ivu-layout-header {
        line-height: unset !important;
    }

    .ivu-drawer-content {
        background: #f8f8f9 !important;
    }

    .layout {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #d7dde4;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
<template>
    <Layout class="layout" v-on:click.native="countdownReset()">
        <Sider hide-trigger style="background-color: #f8f8f9;" width="250">
            <div style="display:flex;justify-content:space-around;align-items:center;flex-direction:column;padding: 30px;height: 100%;">
                <img src="../images/logo.png" height="80" style="margin: 10px;"/>
                <Steps :current="step" direction="vertical" v-if="mode==='print'">
                    <Step v-for="(item,i) in printModeNotice" :title="step===i?'进行中':step>i?'已完成':'待进行'" :content="item"></Step>
                </Steps>
                <Steps :current="step" direction="vertical" v-if="mode==='scan'">
                    <Step v-for="(item,i) in scanModeNotice" :title="step===i?'进行中':step>i?'已完成':'待进行'" :content="item"></Step>
                </Steps>
                <Steps :current="step" direction="vertical" v-if="mode==='copy'">
                    <Step v-for="(item,i) in copyModeNotice" :title="step===i?'进行中':step>i?'已完成':'待进行'" :content="item"></Step>
                </Steps>
                <v-countdownButton ref="countdown" :disabled="disableExitButton"></v-countdownButton>
            </div>
        </Sider>
        <Layout>
            <Header style="background-color: #f8f8f9; height: 108px;">
                <div style="display:flex;justify-content:center;align-items:flex-end;flex-direction:column;height: 100%;">
                    <p style="font-size: 26px;color: #2d8cf0">
                        <span v-if="mode==='print'">{{printModeNotice[step]}}</span>
                        <span v-if="mode==='scan'">{{scanModeNotice[step]}}</span>
                        <span v-if="mode==='copy'">{{copyModeNotice[step]}}</span>
                    </p>
                    <p style="font-size: 16px;">
                        <span v-if="mode==='print'">{{printModeNoticeEN[step]}}</span>
                        <span v-if="mode==='scan'">{{scanModeNoticeEN[step]}}</span>
                        <span v-if="mode==='copy'">{{copyModeNoticeEN[step]}}</span>
                    </p>
                </div>
            </Header>
            <Content :style="this.$root.background">
                <slot name="content"></slot>
            </Content>
        </Layout>
    </Layout>
</template>

<script>
    import CountdownButton from '../components/CountdownButton.vue';

    export default {
        components: {
            'v-countdownButton': CountdownButton,
        },
        data(){
            return{
                printModeNotice:["打印文件上传","打印文件选择","打印预览与调整","打印方式选择","交付打印"],
                printModeNoticeEN:["STEP 1 : UPLOAD FILE","STEP 2 : CHOOSE FILE","STEP 3 : PRINT SETTING","STEP 4 : CHOOSE PRINT TYPE","STEP 5 : PRINTING"],
                scanModeNotice:["文件扫描","扫描件获取方式选择"],
                scanModeNoticeEN:["STEP 1 : SCAN","STEP 2 : GET SCANNED FILE"],
                copyModeNotice:["文件扫描","扫描件获取方式选择","复印设置调整","复印方式选择","交付复印"],
                copyModeNoticeEN:["STEP 1 : SCAN","STEP 2 : GET SCANNED FILE","STEP 3 : COPY SETTING","STEP 4 : CHOOSE COPY TYPE","STEP 5 : PRINTING"],
                disableExitButton:false,
                mode:this.$root.mode,
            }
        },
        props: {
            step: Number,
            countdownTime: Number,
        },
        mounted() {
            if(this.countdownTime!==undefined) {
                this.$refs.countdown.countDownStart(this.countdownTime);
            }else {
                clearInterval(this.$root.countdownClock);
                this.$root.countdownReturnTime=0;
                this.disableExitButton=true;
            }
        },
        methods:{
            countDownStart(returnTime = 60, router = "/",showButton="true") {
                this.disableExitButton=false;
                this.$refs.countdown.countDownStart(returnTime,router,showButton);
            },
            countdownReset(time=this.countdownTime) {
                this.$refs.countdown.countdownReset(time);
            },
        }
    }
</script>

<style scoped>

</style>